<template>
  <div class="user-profile">
    <Panel class="panel">
      <Avatar :src="state.avatar" type="large" class="avatar"></Avatar>

      <p class="h2">
        {{ state.nickName }}
      </p>
      <p style="color: #999">@{{ state.userName }}</p>
      <p>
        <el-tag class="ml-2">Lv{{ state.userLevel }}</el-tag>
      </p>
      <p style="color: #999">{{ state.remark || "-" }}</p>
      <el-button
        :type="followStatus ? 'danger' : 'primary'"
        size="small"
        @click="follow(state.userId, !followStatus)"
      >
        {{ followStatus ? "取关" : "关注" }}
      </el-button>
    </Panel>
  </div>
</template>

<script setup lang="ts" name="userProfileCard">
import { computed, ref, watch } from "vue";
import Avatar from "@/components/Avatar.vue";
import Panel from "@/components/Panel.vue";
import { followUser, isFollow } from "@/api/follow";

const props = defineProps({
  userInfo: {
    type: Object,
    require: true,
  },
});

const followStatus = ref(false);

watch(
  () => props.userInfo?.userId,
  (val) => {
    isFollow(val).then((res) => {
      if (res.code === 200) {
        followStatus.value = res.data;
      }

      console.log("isFollow:", followStatus.value);

      console.log(res);
    });
  }
);

function loadData() {}

function follow(id: any, isFollow: boolean) {
  followUser(id, isFollow).then((res) => {
    followStatus.value = res.data;
  });
}

const state = computed(() => props.userInfo);
</script>

<style scoped lang="less">
.user-profile {
  .panel {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .h2 {
    display: flex;
    align-items: center;
    font-style: bold;
    font-size: 1.2rem;
    & > * {
      margin: 0 5px;
    }
  }
}
</style>
